<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        height: 100px;
        width: 100px;
        background-color: aliceblue;
    }

    /* 入场动画类 */
    .v-enter-from {
        opacity: 0;
    }

    .v-enter-active {
        transition: all 0.5s ease-in;
    }

    .v-enter-to {
        opacity: 1;
    }


    /* 离场动画类 */
    .v-leave-from {
        opacity: 1;
    }

    .v-leave-active {
        transition: all 0.5s ease-in;
    }

    .v-leave-to {
        opacity: 0;
    }
</style>
<!-- Vue 提供了 <Transition> 和 <TransitionGroup> 组件来处理元素进入、离开和列表顺序变化的过渡效果  -->

<body>
    <div id="app"></div>
</body>
<script src="js/vue.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                msg: "vue动画",
                isShow: true,

            }
        },
        template: `
            <div>
                <transition>
                    <div class="box" v-show="isShow">{{msg}}</div>
                </transition>
               
                <button @click="isShow = !isShow">显示与隐藏</button>    
            </div>
        `

    }).mount("#app");
</script>

</html>